<template>
  <div>
    
<div id="layout" class="theme-cyan">
<div class="authentication">
<div class="container d-flex flex-column">
<div class="row align-items-center justify-content-center no-gutters min-vh-100">
<div class="col-12 col-md-7 col-lg-5 col-xl-4 py-md-11">
<div class="card border-0 shadow-sm">
<div class="card-body">

<h3 class="text-center">在线聊天系统</h3>

<p class="text-center mb-6">Online login</p>

<form class="mb-4 mt-5" action="javascript:;" method="POST">

<div class="input-group mb-2">
<input type="text" v-model="form.username" name="username" required class="form-control form-control-lg" placeholder="输入账号">
</div>

<div class="input-group mb-4">
<input type="password" v-model="form.password" name="password" required   class="form-control form-control-lg" placeholder="输入密码">
</div>
<div class="form-group d-flex justify-content-between">
<label class="c_checkbox">
<input type="checkbox" checked>
<span class="ms-2 todo_name">记住密码</span>
<span class="checkmark"></span>
</label>

</div>

<div class="text-center mt-5">
<button type="submit" @click="login" style="width:100%" class="btn btn-full btn-lg btn-block btn-primary" title="">登  录</button>
</div>
</form>

<p class="text-center mb-0">还没有账号 <a class="link" href="/#/regedit">注册账号</a>.</p>
</div>
</div>
</div>
<div class="signin-img d-none d-lg-block text-center">
<img src="admin/static/chat/assets/images/signin-img-cyan.svg" alt="Sign In Image" />
</div>
</div> 
</div>
</div>
</div>





  </div>
</template>
<script>
import {login} from '@/api/accountApi'

export default {
  data(){
    return {
      form:{username:'',password:''}
    }
  }, 
  beforeDestroy(){this.removeFile('admin/static/chat/fonts/material-icon/css/material-design-iconic-font.min.css','css');
this.removeFile('admin/static/chat/assets/css/style.min.css','css');
this.removeFile( 'admin/static/chat/assets/vendor/jquery/jquery-3.5.1.min.js','js');
this.removeFile( 'admin/static/chat/assets/vendor/bootstrap/js/bootstrap.bundle.min.js','js');
},
  mounted(){this.loadFile('admin/static/chat/fonts/material-icon/css/material-design-iconic-font.min.css','css');
this.loadFile('admin/static/chat/assets/css/style.min.css','css');
this.loadFile( 'admin/static/chat/assets/vendor/jquery/jquery-3.5.1.min.js','js');
this.loadFile( 'admin/static/chat/assets/vendor/bootstrap/js/bootstrap.bundle.min.js','js');
},
  methods:{
    login(){
      if(this.form.username!=''&&this.form.password!=''){
        login(this.form).then((resp) => {
            let respData = resp.data //JSON.parse(resp.data);
            if (respData.code == 0) {
              this.$message({
                message: respData.message,
                type: 'error',
              })
            } else {
              localStorage.setItem('token', respData.data.token)
              localStorage.setItem('account',JSON.stringify( respData.data.account))
              this.$message({
                message: respData.message,
                type: 'success',
                duration:1000
              })
              setTimeout(() => {
                this.$router.replace('/#/dashboard')
              }, 1000);
            }
          })
      }else{
        this.$message({message:'请输入账号和密码',type:'error'})
      }
    }
  }
}
</script>
<style  scoped>

</style>